这将是我们这个模块的最后一节，主题是 Nuxt 项目工程化。

实际上 Nuxt 已经帮我们完成了大部分任务，例如：项目创建、自动导入、路由生成、ts支持、服务端整合/渲染、打包等等。 美中不足的是，Nuxi 目前还比较弱，没有 create-vue 那样丰富个性化的配置，例如代码规范和测试支持。另外，项目开发时也需要一些额外的三方库、工具函数等，例如 HTTP 请求封装、图标库使用等等。

因此，我们本节计划完成如下任务：

• 代码规范；
• 代码测试；
• 整合 unocss；
• 使用图标；
• 使用模版项目。

最终，我们会得到一个不错的 starter 项目，作为起始，便于后续项目开发。如果你不关心该项目的搭建过程，可以直接跳到最后一步，学习如何以该项目为模版创建新项目即可。

# 代码规范

通常代码规范这块的配置是非常繁琐的，例如我们通常需要结合 ESLint + Prettier，这需要两个配置，还要有额外插件的安装。这里我给大家推荐的方案是 @antfu/eslint-config，优点是配置非常简单，支持 ts，单独使用不依赖 Prettier。

# 安装

需要安装依赖：

sql
复制代码yarn add -D eslint @antfu/eslint-config typescript

# 配置 .eslintrc

创建 .eslintrc:

perl
复制代码{
  "extends": "@antfu"
}

# 添加脚本 package.json

添加lint和lint:fix两个命令脚本:

json
复制代码{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

# 自动格式化

配置 VS Code 可以实现自动格式化代码：

• 安装扩展：